<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE html>  
<html>  
<head>  
    <title>客户端</title>  
      <script src="<%=basePath%>common/jQuery-2.1.3.min.js"></script>  
    <style type="text/css">  
        #connect-container {  
            float: left;  
            width: 400px  
        }  
  
        #-container div {  
            padding: 5px;  
        }  
  
        #client-container {  
            float: left;  
            margin-left: 15px;  
            width: 400px;  
        }  
  
        #client {  
            border: 1px solid #CCCCCC;  
            border-right-color: #999999;  
            border-bottom-color: #999999;  
            height: 170px;  
            overflow-y: scroll;  
            padding: 5px;  
            width: 100%;  
        }  
  
        #client p {  
            padding: 0;  
            margin: 0;  
        }  
    </style>  
  
    <script src="<%=basePath%>common/websocket.js"></script>  
  
    <script type="text/javascript">  
    	
        var ws = null;  
        var url = null;  
        var transports = [];  
        function setConnected(connected) {  
            document.getElementById('connect').disabled = connected;  
            document.getElementById('disconnect').disabled = !connected;  
            document.getElementById('echo').disabled = !connected;  
        }  
  
        function connect() {  
            if (!url) {  
                alert('请选择连接地址');  
                return;  
            }  
  
            ws = (url.indexOf('sockjs') != -1) ?   
                new SockJS(url, undefined, {protocols_whitelist: transports}) : new WebSocket(url);  
  
            ws.onopen = function () {  
                setConnected(true);  
                logclient('Info: 连接成功.');  
            };  
            ws.onmessage = function (event) {  
                servertoclient('master: ' + event.data);  
            };  
            ws.onclose = function (event) {  
                setConnected(false);  
                logclient('Info: 连接关闭.');  
                logclient(event);  
            };  
        }  
  
        function disconnect() {  
            if (ws != null) {  
                ws.close();  
                ws = null;  
            }  
            setConnected(false);  
        }  
  
        function echo() {  
            if (ws != null) {  
                var message = document.getElementById('message').value;  
                logclient('我: ' + message);  
                ws.send(message);  
            } else {  
                alert('connection not established, please connect.');  
            }  
        }  
  
        function updateUrl(urlPath) {  
            if (urlPath.indexOf('sockjs') != -1) {  
                url = urlPath;  
                document.getElementById('sockJsTransportSelect').style.visibility = 'visible';  
            }  
            else {  
              if (window.location.protocol == 'http:') {  
                  url = 'ws://' + window.location.host + urlPath;  
              } else {  
                  url = 'wss://' + window.location.host + urlPath;  
              }  
              document.getElementById('sockJsTransportSelect').style.visibility = 'hidden';  
            }  
        }  
  
        function updateTransport(transport) {  
            alert(transport);  
          transports = (transport == 'all') ?  [] : [transport];  
        }  
          
        function logclient(message) {  
            var client = document.getElementById('client');  
            var p = document.createElement('p');  
            p.style.wordWrap = 'break-word';  
            p.style.color="green";
            p.appendChild(document.createTextNode(message));  
            client.appendChild(p);  
            while (client.childNodes.length > 25) {  
                client.removeChild(client.firstChild);  
            }  
            client.scrollTop = client.scrollHeight;  
        }  
        //服务端回馈信息
         function servertoclient(message) {  
            var client = document.getElementById('client');  
            var p = document.createElement('p');  
            p.style.wordWrap = 'break-word';  
            p.style.color="red";
            p.appendChild(document.createTextNode(message));  
            client.appendChild(p);  
            while (client.childNodes.length > 25) {  
                client.removeChild(client.firstChild);  
            }  
            client.scrollTop = client.scrollHeight;  
        }  
        function logserver(message) {  
            var client = document.getElementById('server');  
            var p = document.createElement('p');  
            p.style.wordWrap = 'break-word';  
            p.appendChild(document.createTextNode(message));  
            client.appendChild(p);  
            while (client.childNodes.length > 25) {  
                client.removeChild(client.firstChild);  
            }  
            client.scrollTop = client.scrollHeight;  
        }  
        $(window).load(function(){
        		this.url="ws://"+window.location.host+"<%=path%>/ib";
        		connect() ;
        
        });
       
    </script>  
</head>  
<body>  
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websockets   
    rely on Javascript being enabled. Please enable  
    Javascript and reload this page!</h2></noscript>  
<div>  
    <div id="connect-container">  
        <input id="radio2" type="radio" name="group1" checked onclick="updateUrl('/<%=path%>/ib');">  
            <label for="radio2">连接服务器：192.168.0.125</label>  
        <div id="sockJsTransportSelect" style="visibility:hidden;">  
            <span>SockJS transport:</span>  
            <select onchange="updateTransport(this.value)">  
              <option value="all">all</option>  
              <option value="websocket">websocket</option>  
              <option value="xhr-polling">xhr-polling</option>  
              <option value="jsonp-polling">jsonp-polling</option>  
              <option value="xhr-streaming">xhr-streaming</option>  
              <option value="iframe-eventsource">iframe-eventsource</option>  
              <option value="iframe-htmlfile">iframe-htmlfile</option>  
            </select>  
        </div>  
        <div>  
            <button id="connect" onclick="connect();">连接</button>  
            <button id="disconnect" disabled="disabled" onclick="disconnect();">断开</button>  
        </div>  
        <div style="position: relative;">  
            <textarea id="message" style="width: 412px;
  margin: 0px;
  height: 122px;">消息内容</textarea>  
        </div>  
        <div>  
            <button id="echo" onclick="echo();" disabled="disabled">发送消息</button>  
        </div>  
    </div>  
    <div id="client-container">  
        <div id="client"></div>  
    </div>
</div>  
</body>  
</html>  
